/*
 * 统计
 * @author budao
 * @time 2019/05/27
 * @since 1.0.0
 * */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Modal, Row, Col, Spin, Card, DatePicker, Button,Select, Avatar } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config, { listConfig } from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './statisticsViewStyle.less'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
import FlagBtn from 'widget/FlagBtn/FlagView'
import Overview from 'widget/Statistics/overview'
import RealTime from 'widget/Statistics/RealTime'
import Analysis from 'widget/Statistics/Analysis'
import Origin from 'widget/Statistics/Origin'
import UserPortrart from 'widget/Statistics/UserPortrart'

// import infoListAdminView from '../../../threadAdmin/agentList/agentListView'

// import { download } from "utils/util"
import ReactEcharts from 'echarts-for-react';
const FormItem = Form.Item
const Option = Select.Option;
const confirm = Modal.confirm;
import moment from 'moment'

const { MonthPicker, RangePicker } = DatePicker

// console.log(infoListAdminView)
// console.log(Overview)
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const RouteView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  const { biz, shareModal, loading, typeOption, item, noTitleKey, tableQuery } = modelObj
  // console.log(model)
  const operationTabList = [
    {
      key: 'Overview',
      tab: (
        <span>
          概况 <span style={{ fontSize: 14 }}></span>
        </span>
      ),
    },
    {
      key: 'RealTime',
      tab: (
        <span>
          实时统计 <span style={{ fontSize: 14 }}></span>
        </span>
      ),
    },
    {
      key: 'Analysis',
      tab: (
        <span>
          访问分析 <span style={{ fontSize: 14 }}></span>
        </span>
      ),
    },
    {
      key: 'Origin',
      tab: (
        <span>
          来源分析 <span style={{ fontSize: 14 }}></span>
        </span>
      ),
    },
    {
      key: 'UserPortrart',
      tab: (
        <span>
          用户画像 <span style={{ fontSize: 14 }}></span>
        </span>
      ),
    },
  ];
  const CardList = [
    { title: '访问人数', AccessNumber: '1', month: '20.00%', week: '30%', day: '33%' },
    { title: '新访问人数', AccessNumber: '2', month: '20.00%', week: '30%', day: '33%' },
    { title: '总添加人数', AccessNumber: '3', month: '20.00%', week: '30%', day: '33%' },
    { title: '新添加人数', AccessNumber: '4', month: '20.00%', week: '30%', day: '33%' },
  ]
  function handleChange(e){
    console.log(e)
  }

  const contentListNoTitle = {
    Overview: <div>
      <Overview CardList={CardList || ''}></Overview>
    </div>,
    RealTime: <div><RealTime></RealTime></div>,
    Analysis: <div><Analysis></Analysis></div>,
    Origin: <div><Origin></Origin></div>,
    UserPortrart: <div><UserPortrart></UserPortrart></div>,
  };


  function onTabChange(key) {
    console.log(key)
    dispatch({
      type: `${namespace}/changeTab`,
      payload: { key }
    })
  }
  return (
    <div>
      <Col>
        <Card
          className='aaa'
          bordered={false}
          tabList={operationTabList}
          activeTabKey={noTitleKey}
          // activeTabKey={location.pathname.replace(`${match.path}/`, '')}
          onTabChange={(key) => onTabChange(key)}
        >{contentListNoTitle[noTitleKey]}</Card>
      </Col>
      {/* <div className={cx('pageLayout')}>
        <ListPage pageProps={pageProps} />
      </div> */}
    </div>

  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(RouteView))